<template>
  <div class="ly-box">
    <div class="tips"><span>友情提示：</span><span style="color: #ff5061;">{{tips}}</span></div>

    <yd-cell-group title="认证">
      <yd-cell-item>
        <span slot="left">请选择业主：</span>
        <select slot="right" v-model="user" @change="changePhone(user)">
          <option value="">请选择业主</option>
          <option :key="index" v-for="(item,index) in ownersList" :value="item.id">{{item.name}}</option>
        </select>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">手机号：</span>
        <select slot="right" v-model="phone" @change="changePhone(user)">
          <option value="">请选择手机号码</option>
          <option :key="index" v-for="(item,index) in phoneList" :value="item">{{item}}</option>
        </select>
        <!--<yd-input slot="right" v-model="phone" ref="phone" placeholder="手机号码"></yd-input>-->
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">手机号码：</span>
        <yd-input slot="right" regex="mobile" ref="cellPhone" v-model="cellPhone"
                  placeholder="请完整输入上面所选手机号码"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left">验证码：</span>
        <yd-input slot="right" v-model="code" placeholder="验证码"></yd-input>
        <yd-sendcode slot="right"
                     v-model="start"
                     @click.native="sendCode"
                     type="warning"
                     storage-key="codeky"
        ></yd-sendcode>
      </yd-cell-item>
    </yd-cell-group>

    <yd-button size="large" type="primary" class="tjfj-btn" @click.native="suerUser">提交</yd-button>
  </div>
</template>

<script>
  import http from "../../http";
  import storage from "../../store/storage.js";

  export default {
    data() {
      return {
        roomId: '',
        typeInt: '1',
        userName: '',
        cellPhone: '',
        idCard: '',
        user: '',
        ownersList: [],
        start: false,
        phone: '',
        phoneList: [],
        code: '',
        tips: "认证身份后，将享受更多服务。",
      };
    },
    created: function () {
      this.getUser();
    },
    methods: {

      getUser: function () {
        //调取接口 防止提交时未授权需要重新填写
        http.get("/communityApps/personalCenter/userInfo").then(res => {
          if (res.data.code == 20000) {
            storage.put("user", res.data.data);
            this.roomId = this.$route.query.roomId;
            //通过roomId拉取业主成员信息
            this.getOwners(this.roomId);

          }
        });
      },

      //通过roomId拉取业主成员信息
      getOwners: function (roomId) {
        const params = {
          id: roomId
        };
        http.post("/communityApps/personalCenter/owner/info", params).then(res => {
          if (res.data.code == 20000) {
            if (res.data.data.owners.length <= 0) {
              this.$dialog.toast({
                mes: "请先到物业处绑定房间！",
                timeout: 1500
              });
              this.tips = "请先到物业处绑定房间!"

              this.user="";
              this.ownersList = [];
              this.phone="";
              this.phoneList=[];
              this.cellPhone="";

            } else {
              this.ownersList = res.data.data.owners;
              this.user = res.data.data.owners[0].id;
              this.changePhone(res.data.data.owners[0].id)
            }
          } else {
            this.user="";
            this.ownersList = [];
            this.phone="";
            this.phoneList=[];
            this.cellPhone="";
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },


      //根据选着的业主加载手机号码
      changePhone: function (userId) {
        console.log(userId);
        http.get("/communityApps/personalCenter/owner/phone?ownerId=" + userId).then(res => {
          console.log(res);
          if (res.data.code == 20000) {
            if (res.data.data.length <= 0) {
              this.$dialog.toast({
                mes: "请先到物业处绑定房间！",
                timeout: 1500
              });
              this.tips = "请先到物业处绑定房间!"
              this.phone="";
              this.phoneList=[];
              this.cellPhone="";
            } else {
              this.phoneList = res.data.data;
              this.phone = res.data.data[0];
              // this.cellPhone = res.data.data[0];
              this.tips = "认证身份后，将享受更多服务。"
            }

          } else {
            this.phone="";
            this.phoneList=[];
            this.cellPhone="";
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });

      },


      sendCode: function () {

        const cellPhone = this.$refs.cellPhone
        let isphoen = cellPhone.valid;

        //判断电话号码不为空
        if (this.cellPhone == "") {
          this.$dialog.toast({
            mes: "请先选择手机号码",
            timeout: 800
          });
        } else {
          if (isphoen) {
            const body = {
              ownerId: this.user,
              cellPhone: this.cellPhone
            };
            http.get("/communityApps/personalCenter/verify", body).then(res => {
              if (res.data.code == 20000) {
                this.start = true;
                this.$dialog.toast({
                  mes: '已发送',
                  icon: 'success',
                  timeout: 800
                });
              } else {
                this.$dialog.toast({
                  mes: res.data.message,
                  timeout: 1500
                });
              }
            });
          } else {
            this.$dialog.toast({
              mes: "请先完整输入上面所选手机号码",
              timeout: 800
            });
          }
        }
      },


      suerUser: function () {

        if (this.code == "") {
          this.$dialog.toast({
            mes: '请先输入短信验证码',
            timeout: 800
          });
        } else {
          const params = {
            roomId: this.roomId,
            ownerId: this.user,
            verifyCode: this.code,
            cellPhone: this.cellPhone,
          };
          console.log(params);
          http.post("/communityApps/personalCenter/accreditationRoom", params).then(res => {
            if (res.data.code == 20000) {
              this.$dialog.toast({
                mes: "认证成功",
                timeout: 500,
                callback: () => {
                  this.$router.push("/user/roomList");
                }
              });
            } else {
              this.$dialog.toast({
                mes: res.data.message,
                timeout: 1500
              });
            }
          });
        }
      }
    }
  };
</script>

<style>
  .ly-box .yd-cell-right select {
    color: #555;
  }

</style>

<style scoped lang="scss">
  .tjfj-btn {
    width: 86%;
    margin: 0 auto;
  }

  .tips {
    padding: 0.2rem;
  }
</style>
